<template>
  <div class="collect-list">
    <nav-bar 
      left-arrow 
      @clickLeft="$goPageBack()"
    />

    <van-list
      v-if="!is_empty"
      v-model="loading"
      :finished="is_finished"
      :offset="100"
      finished-text="没有更多了"
    >
      <prod-item 
        :list="list"  
        from="collect" 
        :edit-item="edit" 
        :check-all="checkAll"
        ref="collectProd"
        @changeAll="changeAll"
      />
    </van-list>
    <no-data v-else />

    <van-submit-bar 
      :disabled = "is_disabled"
      :class="edit ? 'van-hairline--top':'van-hairline--top is-btn-del'"
      button-type="primary"
      button-text="删除"
      @submit="delCollect"
    >

      <template name="defult" v-if="edit">
        <van-checkbox
          v-model="checked" 
          @click="toggle"
          :bind-group="false"
        >全选</van-checkbox>
        <div class="van-submit-bar__text"></div>
      </template>

      <van-button type="default" class="van-submit-bar__button" @click="eidtFavorite">{{edit_text}}</van-button>
    </van-submit-bar>

    <slogan :class="edit && 'mg-footer'"/>
  </div>
</template>
<script>
import NavBar from "@cmpt/header/navbar"
import ProdItem from '@views/product/components/item'
import NoData from '@cmpt/no-data'
import {
    getCollectList,
    delCollectProd
} from '@/api/modules/product'
import {
  List,
  Icon,
  Button,
  SubmitBar,
  Checkbox,
  Toast,
} from 'vant'
import Slogan from '@cmpt/slogan'
export default {
  name: 'collect-list',
  components: {
    [NavBar.name]: NavBar,
    [ProdItem.name]: ProdItem,
    [NoData.name]: NoData,
    [List.name]: List,
    [Icon.name]: Icon,
    [Checkbox.name]: Checkbox,
    [Button.name]: Button,
    [SubmitBar.name]: SubmitBar,
    [Slogan.name]: Slogan,
    [Toast.name]: Toast,
  },
  data() {
    return {
      is_disabled:true,
      edit: false,
      edit_text: "编辑",
      checked: false,
      checkAll: false,
      list: [],
      total: 0,
      page: 1,
      limit: 10,
      loading: false,
      is_finished: false,
      is_empty: false,
    }
  },
  watch: {
    list(nw) {
      if(nw.length == 0){
        this.edit = false
        this.is_empty = true
      }
    }
  },
  created() {
    this.onload()
  },
  methods: {
    toggle() {
      this.checkAll = this.checked = !this.checked
    },
    changeAll(isAll){
      this.checked = isAll
      const ids = this.$refs.collectProd.checkboxResult;
      ids.length ? this.is_disabled = false : this.is_disabled = true;
    },
    async onload() {
      this.loading = true
      getCollectList({})
        .then(res => {
          if(!Object.keys(res.data).length){
            this.is_empty = true
            return 
          }
          this.page++
          this.list = this.list.concat(res.data.list)
          this.total = res.data.total

          this.is_finished = this.total <= this.list.length
          this.loading = false

          this.is_empty = this.total <= 0
        })
        .catch(err => {
          this.is_finished = this.total <= this.list.length
          this.loading = false
          this.is_empty = this.total <= 0
        })
    },
    // 删除我的收藏的东西
    delCollect() {
      const ids = this.$refs.collectProd.checkboxResult;
      delCollectProd(ids).then(res => {
          let list = []
          this.list.forEach(item => {
            if(ids.indexOf(item.id) === -1)list.push(item)
          })
          this.list = list;
          this.$refs.collectProd.checkboxResult = [];
          this.is_disabled = true;
          Toast("操作成功");
      })
    },

    //编辑我的收藏
    eidtFavorite() {
      this.edit = !this.edit;
      this.edit_text = this.edit ? "完成" : "编辑";
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
.van-submit-bar__bar {
  margin: 0 17px;
}
.van-submit-bar__button {
  height: 30px;
  line-height: 30px;
  width: 74px;
  font-size: 14px;
  border-radius: @radius-default / 2;
  margin-left: @size-sm !important;
}
.van-button--disabled{
  border: solid 1px #ccc;
  background: #ccc;
  color: #999;
  opacity: 1;
}
.is-btn-del .van-button--primary{
  display: none;
}
</style>